<template>
	<div>
		<div class="websiteEditorElem" style="background: #ffffff;"></div>
	</div>
</template>

<script>
	import E from 'wangeditor'
	import api from '@/api/banner'
	import {
		getUploadForOSS,
		POST
	} from '@/api/banner'

	const baseApi = process.env.VUE_APP_API_BASE_URL

	export default {
		name: 'WangEditor',
		props: [ 'content' ],
		data() {
			return {
				uploadApi: baseApi + api.upload,
				phoneEditor: '',
				name: ''
			}
		},
		beforeDestroy() {
			// 销毁编辑器实例，释放资源
			if ( this.phoneEditor ) {
				this.phoneEditor.destroy()
			}
		},
		mounted() {
			this.phoneEditor = new E( '.websiteEditorElem' )
			// 上传图片到服务器，base64形式
			this.phoneEditor.config.uploadImgShowBase64 = true
			// // 隐藏网络图片 
			this.phoneEditor.config.showLinkImg = false
			this.phoneEditor.config.uploadImgTimeout = 600 * 1000
    
      // 图片上传大小限制，2024年11月16日22:09:59
      this.phoneEditor.config.uploadImgMaxSize = 50 * 1024 * 1024

			this.phoneEditor.config.debug = true
			// 图片上传接口
			this.phoneEditor.config.uploadImgServer = this.uploadApi // 上传图片的接口地址
			this.phoneEditor.config.uploadVideoServer = this.uploadApi
			this.phoneEditor.config.uploadFileName = 'file' // formdata中的name属性，比如现在是将图片image加入到formdate，后台从image中接收到图片数据
			// 自动上传
			// this.phoneEditor.config.uploadImgHooks = {
			// 	customInsert: function( insertImg, result, editor ) {
			// 		insertImg( result.data.src )
			// 	}
			// }
			// 自定义上传图片 直传oss
			this.phoneEditor.config.customUploadImg = ( resultFiles, insertImgFn ) => {
				// resultFiles 是 input 中选中的文件列表
				resultFiles.forEach( d => {
					this.fileToOss( d, ( url ) => {
						insertImgFn( url )
					} )
				} )
			}
			// 自定义上传视频 直传oss
			this.phoneEditor.config.customUploadVideo = ( resultFiles, insertVideoFn ) => {
				// resultFiles 是 input 中选中的文件列表
				resultFiles.forEach( d => {
					this.fileToOss( d, ( url ) => {
						insertVideoFn( url )
					} )
				} )
			}
			// 创建一个富文本编辑器
			this.phoneEditor.create()
			// 修改的时候，需要富文本内容回显，则需要加入以下代码
			this.phoneEditor.txt.html( this.content )

			this.phoneEditor.config.onchange = ( html ) => {
				this.info_ = html // 绑定当前逐渐地值
				this.$emit( 'change', this.info_ ) // 将内容同步到父组件中
			}
		},
		methods: {
			wangEditorReset( item ) {
				this.phoneEditor.txt.html( item )
			},
			fileToOss( d, callBack ) {
				getUploadForOSS( {
						fileName: d.name
					} )
					.then( res1 => {
						if ( res1.data ) {
							let data = res1.data;
							const formData = new FormData();
							formData.append( "name", d.name );
							formData.append( "policy", data.policy );
							formData.append( "OSSAccessKeyId", data.ossAccessKeyId );
							formData.append( "success_action_status", "200" );
							formData.append( "signature", data.signature );
							formData.append( "key", data.fileKey );
							formData.append( "file", d );
							POST( data.host, formData )
								.then( ( res2 ) => {
									if ( res2.status == '200' ) {
										callBack( res1.data.saveFileUrl )
									}
								} )
						}
					} )
			}
		}
	}
</script>